<template>
  <!--备机审核页面-->
  <div>
    <!--查询条件区域-->
    <el-form :inline="true" :model="searchDto" ref="searchForm">
      <el-form-item prop="province">
        <v-distpicker @selected="OnProvinceSelected" :provinceOut="searchDto.province" only-province>
        </v-distpicker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchData">查询</el-button>
      </el-form-item>
    </el-form>
    <!--一览显示区域-->
    <!--<custom-table-->
      <!--:data="checkList"-->
      <!--:columns="columns"-->
      <!--:tableLoadingFlag="tableLoadingFlag"-->
      <!--:operationColumn="operationColumn"-->
      <!--:pagination="pagination">-->
    <!--</custom-table>-->
    <!--tab栏-->
    <el-tabs v-model="activeName" type="border-card">
      <el-tab-pane label="未审核" name="unCheck" @tab-click="handleClick(activeName)">
        <custom-table
          :data="checkList"
          :columns="columns"
          :tableLoadingFlag="tableLoadingFlag"
          :operationColumn="operationColumn"
          :pagination="pagination">
        </custom-table>
      </el-tab-pane>
      <el-tab-pane label="已审核" name="alreadyCheck">
        <custom-table
          :data="alreadyCheckList"
          :columns="finishColumns"
          :tableLoadingFlag="finishTableLoadingFlag"
          :operationColumn="operationColumn1"
          :pagination="pagination1">
        </custom-table>
      </el-tab-pane>
    </el-tabs>
    <!--备机审核模态框-->
    <el-dialog title="备机审核" :visible.sync="dialogVisible" :close-on-click-modal="false">
      <el-form :model="checkDto" :rules="checkRules" label-width="60px" ref="checkForm">
        <el-form-item label="审核">
          <el-radio-group v-model.number="checkDto.approvedResult">
            <el-radio-button label="0">同意</el-radio-button>
            <el-radio-button label="1">不同意</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="原因" prop="cause">
          <el-input v-model.trim="checkDto.cause" placeholder="请输入原因"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="onBtnCancel()">取消</el-button>
        <el-button type="primary" @click="onBtnSubmit()">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="申请详情" center :visible.sync="applyDetailVisible" wdith="100%" :close-on-click-modal="false">
      <el-steps align-center :active="applyStep" finish-status="success" :process-status="processStatus">
        <el-step title="申请备机"></el-step>
        <el-step title="审核"></el-step>
        <el-step title="审批"></el-step>
        <el-step title="发放"></el-step>
      </el-steps>
      <div v-if="applyStep>=1">
        <h4>审核结果：</h4>
        <custom-table
          :columns="columnDailogAudit"
          :data="applyAuditDetail"
          :tableLoadingFlag="finishTableLoadingFlag">
        </custom-table>
      </div>
      <div v-if="applyStep>=2">
        <h4>审批结果：</h4>
        <custom-table
          :columns="columnDailogApprove"
          :data="applyApproveDetail"
          :tableLoadingFlag="finishTableLoadingFlag">
        </custom-table>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import CustomTable from '@/components/table/CustomTable'
  import {apiGetCheckList, apiCheck, apiGetAlreadyCheckList, apiSpareSelfDetail} from '@/api/standby/index'
  import { parseTime } from '@/utils'
  import {getUserId, getUserName} from '@/utils/token'

  export default {
    components: {
      CustomTable
    },
    created () {
      let listQuery = {
        pageNumber: this.pagination.currentPage,
        pageSize: this.pagination.pageSize
      }
      this.getCheckList(listQuery)
      this.getAlreadyCheckList(listQuery)
    },
    data () {
      return {
        tab: 0,
        activeName: 'unCheck',
        tableLoadingFlag: false,          // 审批列表
        checkList: [],
        columns: [
          {label: 'ID', name: 'id', width: '80', align: 'center'},
          {label: '申请单号', name: 'applicationNo', width: '200', align: 'center'},
          {label: '申请人', name: 'proposer', width: '100', align: 'center'},
          {label: '省份', name: 'province', width: '120', align: 'center'},
          {label: '产品名称', name: 'itemName', width: '150', align: 'center'},
          {label: '额度', name: 'isOver', width: '150', align: 'center'},
          {label: '型号', name: 'modelName', width: '150', align: 'center'},
          {label: '单位', name: 'unit', width: '50', align: 'center'},
          {label: '数量', name: 'num', width: '80', align: 'center'},
          {label: '原因说明', name: 'remark', align: 'center'}
        ],
        operationColumn: {
          width: '80',
          operations: [
            {name: '审核', callback: this.onBtnCheck}
          ]
        },
        dialogVisible: false,             // 审批模态框
        checkDto: {
          id: undefined,
          approverId: undefined,
          approverName: undefined,
          approvedResult: 1,
          cause: ''
        },
        checkRules: {
          cause: [
            {
              validator: (rule, value, callback) => {
                if (this.checkDto.approvedResult === 1 && value === '') {
                  callback(new Error('请输入不同意原因'))
                } else {
                  callback()
                }
              },
              trigger: 'blur'
            },
            {max: 255, message: '长度不得超过255字符', trigger: 'blur'}
          ]
        },
        pagination: this.getData(this.getCheckList),
        pagination1: this.getData(this.getAlreadyCheckList),
        listQuery: {
          provinceCode: '',
          userId: ''
        },
        searchDto: {
          province: ''
        },
        finishTableLoadingFlag: false,
        finishColumns: [
          {label: '省份', name: 'province', align: 'center'},
          {label: '申请人姓名', name: 'proposer', align: 'center'},
          {label: '申请时间', name: 'applicationDate', align: 'center', formatter: this.formatTime},
          {label: '型号', name: 'modelName', align: 'center'},
          {label: '台数', name: 'num', align: 'center'},
          {label: '审核状态', name: 'applicationStatus', align: 'center'},
          {label: '原因', name: 'cause', align: 'center'},
          {label: '单位', name: 'unit', align: 'center'}
        ],
        // 已审核的操作栏
        operationColumn1: {
          width: '100',
          operations: [
            {name: '详情', callback: this.getDetailSelfApply}
          ]
        },
        // 申请详情模态框审核的表单列
        columnDailogAudit: [
          {label: '审核人', name: 'name', width: '100', align: 'center'},
          {label: '审核时间', name: 'time', width: '180', align: 'center', formatter: this.formatTime},
          {label: '审核结果', name: 'result', width: '150', align: 'center', formatter: this.formatStatus},
          {label: '原因', name: 'reason', align: 'center'}
        ],
        // 申请详情模态框审批的表单列
        columnDailogApprove: [
          {label: '审批人', name: 'name', width: '100', align: 'center'},
          {label: '审批时间', name: 'time', width: '180', align: 'center', formatter: this.formatTime},
          {label: '审批结果', name: 'result', width: '150', align: 'center', formatter: this.formatStatus},
          {label: '原因', name: 'reason', align: 'center'}
        ],
        // 初始进度状态
        processStatus: 'wait',
        // 进度状态值
        applyStep: 0,
        applyDetailVisible: false,
        applyAuditDetail: [
          {
            name: '',
            time: '',
            result: '',
            reason: ''
          }
        ],
        // 审批DTO信息
        applyApproveDetail: [
          {
            name: '',
            time: '',
            result: '',
            reason: ''
          }
        ],
        alreadyCheckList: []
      }
    },
    methods: {
      // 获取待审核一览
      getCheckList (listQuery) {
        this.tableLoadingFlag = true
        if (listQuery.provinceCode === '') {
          listQuery.provinceCode = this.searchDto.province
        }
        listQuery.userId = getUserId()
        apiGetCheckList(listQuery).then(response => {
          this.checkList = response.data
          this.pagination.totalRecords = response.totalRecords
          this.tableLoadingFlag = false
        }).catch(() => {
          this.tableLoadingFlag = false
        })
      },
      // 获得已审核一览
      getAlreadyCheckList(listQuery) {
        this.finishTableLoadingFlag = true
        if (listQuery.provinceCode === '') {
          listQuery.provinceCode = this.searchDto.province
        }
        listQuery.userId = getUserId()
        apiGetAlreadyCheckList(listQuery).then(response => {
          this.alreadyCheckList = response.data
          this.pagination1.totalRecords = response.totalRecords
          this.finishTableLoadingFlag = false
        }).catch(() => {
          this.finishTableLoadingFlag = false
        })
      },
      // 审核按钮事件,弹出审核对话框
      onBtnCheck (row) {
        let dto = this.checkDto
        dto.approvedResult = 1
        dto.applicationId = row.id
        dto.approverId = getUserId()
        dto.approverName = getUserName()
        this.dialogVisible = true
      },
      // 审核模态框中确定按钮事件
      onBtnSubmit () {
        this.$refs['checkForm'].validate((valid) => {
          if (valid) {
            // 审核接口
            apiCheck(this.checkDto).then(() => {
              this.$message({
                showClose: true,
                message: '审核成功！',
                type: 'success'
              })
              this.getCheckList(this.listQuery)
              this.onBtnCancel()
            })
          } else {
            return false
          }
        })
      },
      // 审核模态框中取消按钮事件
      onBtnCancel () {
        this.dialogVisible = false
        this.$refs['checkForm'].resetFields()
      },
      OnProvinceSelected (data) {
        this.searchDto.province = data.province.code
      },
      // 查询操作
      searchData () {
        this.listQuery.provinceCode = this.searchDto.province
        this.pagination.currentPage = 1
        this.pagination.pageSize = 10
        this.getCheckList(this.listQuery)
        this.pagination1.currentPage = 1
        this.pagination1.pageSize = 10
        this.getAlreadyCheckList(this.listQuery)
      },
      handleClick (activeName) {
        if (activeName === 'unCheck') {
          this.tab = 0
          this.searchDate()
        } else if (activeName === 'alreadyCheck') {
          this.tab = 1
          this.searchDate()
        }
      },
      // 审核结果
      formatStatus (row, column, cellValue) {
        if (cellValue === 1) {
          return '不通过'
        }
        return '通过'
      },
      // 获取一条备机申请的详细信息
      getDetailSelfApply (row) {
        apiSpareSelfDetail(row.id).then(response => {
          if (response.data.applicationStatus === 1) {
            // 已提交申请，待审核
            this.applyStep = 0
            this.processStatus = 'success'
          } else if (response.data.applicationStatus === 2) {
            // 已通过审核，待审批
            this.applyStep = 1
            this.processStatus = 'success'
          } else if (response.data.applicationStatus === 3 || response.data.applicationStatus === 4) {
            // 已通过审批，待发放
            this.applyStep = 2
            this.processStatus = 'success'
          } else if (response.data.applicationStatus === 5) {
            // 设备已全部发放
            this.applyStep = 3
            this.processStatus = 'success'
          } else if (response.data.applicationStatus === 6 && (response.approve === undefined || response.approve === null)) {
            // 未通过审核
            this.applyStep = 1
            this.processStatus = 'error'
          } else if (response.data.applicationStatus === 6 && response.approve !== undefined && response.approve !== null) {
            // 未通过审批
            this.applyStep = 2
            this.processStatus = 'error'
          }
          if (this.applyStep >= 1) {
            this.applyAuditDetail[0].name = response.audit.name
            this.applyAuditDetail[0].time = response.audit.approveDate
            this.applyAuditDetail[0].result = response.audit.result
            this.applyAuditDetail[0].reason = response.audit.cause
          }
          if (this.applyStep >= 2) {
            this.applyApproveDetail[0].name = response.approve.name
            this.applyApproveDetail[0].time = response.approve.approveDate
            this.applyApproveDetail[0].result = response.approve.result
            this.applyApproveDetail[0].reason = response.approve.cause
          }
          this.applyDetailVisible = true
        })
      },
      // 时间格式
      formatTime (row, column, cellValue) {
        return parseTime(cellValue)
      }
    }
  }
</script>
